<template>
    <g-layout :back="false" title="族亲" class="waterfall_vue">
        <view class="layout-imgs_vue">
            <view class="pd-10">
                <u-subsection :list="list" :current="current" mode="subsection" @change="subsectionChange" />
            </view>
            <view class="container">
                <u-lazy-load class="item"
                             v-for="(item, index) in imgData2"
                             :key="index"
                             :image="item.url"
                             :name="item.name"
                             @click="previewImage(index)">
                </u-lazy-load>
            </view>
        </view>
    </g-layout>
</template>

<script>
import indexData from "./index.json"
import base from '@/common/base';
export default {
    name: "layout-img",
    extends: base,
    data() {
        return {
            tabsKey:0,
            imgData:[],
            imgData2:[
                {url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png'},
                {url: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2022/08/25/23/06/woman-7411414_1280.png'},
                {url: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2022/08/25/23/06/woman-7411414_1280.png'},
                {url: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg'},
                {url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg'}
            ],
            current: 0,
            list:[{name:'头坪'},{name:'山嘎'},{name:'武称'},{name:'老房子'},{name:'上林'},{name:'什岩'},{name:'大坪'}],
            arrData:[],
            detailData:[],
            itemData:[],
        }
    },
    mounted() {
        const self = this;
        self.list = []
        self.detailData = indexData.detailData
        self.changeData()
    },
    onBackPress(options) {
        if (options.from === 'navigateBack') {
            return false;
        }
        return true;
    },
    methods: {
        previewImage(indexImg) {
            let self = this;
            if(self.imgData != undefined && self.imgData.length > 0){
                let photoList = self.imgData.map(item => {
                    return item.url;
                });
                uni.previewImage({
                    current: indexImg,
                    urls: photoList
                });
            }
        },
        changeData(){
            let self = this;
            self.list = []
            self.detailData.forEach((item)=>{
                self.list.push({name:item.title})
            })
            self.itemData = self.detailData[self.current]
            self.itemData.swiperImgs.forEach((item)=>{
                self.imgData.push({url:item})
            })
            self.itemData.menuData.forEach((item)=>{
                item.photoList.forEach((item)=>{
                    self.imgData.push({url:item.url,name:item.name})
                })
            })
            self.tabsKey++
        },
        onChange(index){
            let self = this;
            self.current = index
            self.imgData = []
            self.changeData()
        },
        onShare(){
            let self = this;
            self.openPage({
                url: '/pages_pedigree/settings',
            });
        },
        subsectionChange(e){
            this.current = e
        },
    },
};
</script>

<style scoped lang="scss">
/deep/.u-lazy-item img{height: auto;}
/deep/.u-wrap{background-color: #fff;}

.layout-imgs_vue {
    width: 100%;
    height: 100%;
    .container {
        column-count: 2; /* 指定列数 */
        column-gap: 0; /* 列之间的间距 */
        width: 100%; /* 根据需要调整宽度 */
        padding-bottom: 40rpx;
    }
    .item {
        break-inside: avoid; /* 防止内容在列之间断裂 */
        padding: 5px; /* 根据需要添加内边距 */
    }
    .item img {
        display: block; /* 使图片成为块级元素，方便设置宽度和高度 */
        width: 100%; /* 图片宽度与容器宽度一致 */
        height: auto; /* 图片高度自动调整，保持原始比例 */
    }
    .u-wrap.item:nth-child(odd){padding-right: 7rpx;}
    .u-wrap.item:nth-child(even){padding-left: 7rpx;}
}
</style>
